<template>
  <div class="main">
    <div class="InfoLabelList">
      <header-back v-show="!hideHeader"></header-back>
      <scroller ref="scrollerBottom" :on-infinite="handleReachButton" noDataText="没有更多数据">
        <div>
          <div style="height:0.8rem" v-show="!hideHeader"></div>
          <div class="list-box">
            <div class="term flex-h" v-for="item in commodityList" :key="item.id" @click="handleIntoDetail(item)">
              <img class="left" :src="item.cover" alt />
              <div class="flex1 right">
                <span>{{ item.topicName }}</span>
                <b>共 {{ item.count }} 个课程</b>
              </div>
            </div>
          </div>
        </div>
      </scroller>
    </div>
  </div>
</template>
<script>
import { getCommodityTopicPageList } from '~/api/identity'
import headerBack from '~/components/headerBack'
import 'swiper/dist/css/swiper.css'
import Swiper from 'swiper/dist/js/swiper.js'
export default {
  head: {
    title: '全部专题',
  },
  components: {
    headerBack,
  },
  data() {
    return {
      currentPage: 1,
      commodityList: [],
      hideHeader: false,
    }
  },
  mounted: function() {
    if (this.commonJs.GetUrlParam('mini_token')) {
      this.hideHeader = true
    }
    this.$visit('SubjectList')
    this.getCommodityTopicPageList()
  },
  methods: {
    handleIntoDetail(item) {
      if (this.commonJs.GetUrlParam('mini_token')) {
        this.$router.push({
          path: 'detail',
          query: {
            id: item.id,
            count: item.count,
            mini_token: this.commonJs.GetUrlParam('mini_token'),
          },
        })
      } else {
        this.commonJs.gopush('detail?id=' + item.id + '&count=' + item.count)
      }
    },
    specialSwip() {
      var mySwiper = new Swiper('#specialSwiper', {
        slidesPerView: 'auto',
        mousewheelControl: true,
        freeMode: true,
      })
    },
    getCommodityTopicPageList() {
      let obj = {
        pageNo: this.currentPage,
        pageSize: 10,
        recommend: 0,
      }
      getCommodityTopicPageList(obj)
        .then((res) => {
          if (res.code == '0') {
            this.totlaPages = res.data.pages
            this.commodityList = res.data.list
          }
        })
        .catch((err) => {})
    },
    handleReachButton(done) {
      if (this.currentPage < this.totlaPages) {
        this.currentPage = this.currentPage + 1
        getCommodityTopicPageList({
          pageNo: this.currentPage,
          pageSize: 10,
          recommend: 0,
        }).then((res) => {
          if (res.code == '0') {
            let newArr = res.data.list
            this.commodityList = this.commodityList.concat(newArr)
            this.totlaPages = res.data.pages
            done()
          }
        })
      } else {
        done(true)
        return
      }
    },
  },
}
</script>

<style scoped lang="less">
.subtitle {
  padding: 0 0.3rem;
  box-sizing: border-box;
  height: 0.8rem;
  margin: 0.2rem auto;
  span {
    font-size: 0.4rem;
    font-family: PingFangSC;
    font-weight: 600;
    color: rgba(34, 34, 34, 1);
    line-height: 0.8rem;
  }
  .imgIcon {
    width: 0.6rem;
    height: 0.6rem;
    display: inline-block;
    background: url('~@/static/sprite/icon_sprites_40.png') -1.95rem -1.05rem;
    background-size: 4.5rem 3.6rem;
  }
}
.main {
  width: 100%;
  height: 100vh;
  font-size: 0.3rem;
}
.InfoLabelList {
  width: 100%;
  height: 100vh;
  background: #fff;
}

.list-box {
  width: 100%;
  padding: 0.3rem;
  box-sizing: border-box;
  h2 {
    font-size: 0.4rem;
    font-family: 'PingFangSC-Semibold', PingFangSC;
    font-weight: 600;
    color: rgba(34, 34, 34, 1);
    margin-bottom: 0.2rem;
  }
  .term {
    width: 100%;
    height: 1.9rem;
    margin-bottom: 0.3rem;
    .left {
      width: 3.2rem;
      height: 100%;
      background: url('~@/static/header.png') no-repeat;
      background-size: 100% 100%;
      border-radius: 0.1rem;
    }
    .right {
      padding-left: 0.3rem;
      box-sizing: border-box;
      span {
        display: block;
        font-size: 0.3rem;
        font-family: 'PingFangSC-Semibold', PingFangSC;
        font-weight: 600;
        color: rgba(34, 34, 34, 1);
        line-height: 0.4rem;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        height: 0.8rem;
      }
      b {
        display: block;
        font-size: 0.28rem;
        font-family: 'PingFangSC-Regular', PingFangSC;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        margin-top: 0.5rem;
        height: 0.4rem;
      }
    }
  }
}
</style>
